<template>
  <view class="tui-searchbox">
    <view class="tui-rolling-search">
      <!-- #ifdef APP-PLUS || MP -->
      <icon type="search" :size="13" color="#999"></icon>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="tui-icon-box">
        <tui-icon name="search" :size="16" color="#999"></tui-icon>
      </view>
      <!-- #endif -->
      <swiper
        v-if="hotSearch.length > 0"
        vertical
        autoplay
        circular
        interval="8000"
        class="tui-swiper"
      >
        <swiper-item
          v-for="(item,index) in hotSearch"
          :key="index"
          class="tui-swiper-item"
          @tap="search"
        >
          <view class="tui-hot-item">大家正在搜：{{ item }}</view>
        </swiper-item>
      </swiper>
      <view class="tui-swiper tui-hot-item" v-else-if="placeholder" @tap="search">{{ placeholder }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "tuiSearchBox",
  props: {
    // 滚动热搜
    hotSearch: {
      type: Array,
      default: []
    },
    // 搜索提示
    placeholder: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  methods: {
    // 搜索事件
    search() {
      this.$emit("search");
    }
  }
};
</script>

<style>
.tui-searchbox {
  padding: 16rpx 20rpx;
  box-sizing: border-box;
}

.tui-rolling-search {
  width: 100%;
  height: 60rpx;
  border-radius: 35rpx;
  padding: 0 40rpx 0 30rpx;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  color: #999;
}

.tui-swiper {
  font-size: 26rpx;
  height: 60rpx;
  flex: 1;
  padding-left: 12rpx;
}

.tui-swiper-item {
  display: flex;
  align-items: center;
}

.tui-hot-item {
  line-height: 26rpx;
  height: 26rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
